import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, IStates, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {UIConfigKey} from "../../../script/constant/UIConfig";
import {FrameEvent} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";

export interface ButtonState {
    bEnter: boolean,
    bClick: boolean,
}

export class BiggerButton<Prop, State> extends View<Prop, ButtonState> {
    declare props: IProps & Prop;

    bLight: boolean = false;

    constructor(props: IProps & Prop) {
        super(props);

        this.state = {
            visible: true,
            bEnter: false,
            bClick: false,
        }
    }

    onMouseDown(event: FrameEvent) {
        super.onMouseDown(event);
        // this.bEnter = false;
    }

    onMouseEnter(event: FrameEvent) {
        super.onMouseEnter(event);
        this.setState({
            ... this.state,
            bEnter: true,
        })
    }
    onMouseLeave(event: FrameEvent) {
        super.onMouseLeave(event);
        this.toSmaller();
        this.setState({
            ... this.state,
            bEnter: false,
        })
    }

    componentWillMount = () => {
        // super.componentWillMount();
        if (this.state.bEnter) {
            this.toBigger();
        }
        return true
    }

    toBigger() {
        // const buttonScale: number = Configer.getUIConfig(UIConfigKey.buttonScale)
        // const fontSizeConfig: number = Configer.getUIConfig(UIConfigKey.fontSize)
        // const marginL = this.props.style?.marginL ? this.props.style.marginL : 0;
        // const marginT = this.props.style?.marginT ? this.props.style.marginT : 0;
        //
        // const width = this.props.style?.width ? this.props.style.width : 0;
        // const height = this.props.style?.height ? this.props.style.height : 0;
        // const fontSize = this.props.style?.fontSize ? this.props.style.fontSize : fontSizeConfig;
        //
        // const newMarginL = marginL - buttonScale;
        // const newMarginT = marginT - buttonScale;
        //
        // const newWidth = width + 2 * buttonScale;
        // const newHeight = height + 2 * buttonScale;
        //
        // const newFontSize = fontSize + 2 * buttonScale;
        //
        //
        // this.props.style = { ...this.props.style,  marginT: newMarginT, marginL: newMarginL, height: newHeight, width: newWidth, fontSize: newFontSize };
    }

    toSmaller () {
        // const buttonScale = Configer.getUIConfig(UIConfigKey.buttonScale)
        // const fontSizeConfig: number = Configer.getUIConfig(UIConfigKey.fontSize)
        // const marginL = this.props.style?.marginL ? this.props.style.marginL : 0;
        // const marginT = this.props.style?.marginT ? this.props.style.marginT : 0;
        // const fontSize = this.props.style?.fontSize ? this.props.style.fontSize : fontSizeConfig;
        //
        // const width = this.props.style?.width ? this.props.style.width : 0;
        // const height = this.props.style?.height ? this.props.style.height : 0;
        //
        // const newMarginL = marginL + buttonScale;
        // const newMarginT = marginT + buttonScale;
        //
        // const newWidth = width - 2 * buttonScale;
        // const newHeight = height - 2 * buttonScale;
        //
        // const newFontSize = fontSize - 2 * buttonScale;
        //
        // this.props.style = { ...this.props.style, marginT: newMarginT, marginL: newMarginL, height: newHeight, width: newWidth, fontSize: newFontSize  };
    }
}